<!--
 * @Author: WangZhiYu <w19165802736@163.com>
 * @Date: 2025-04-18 22:50:54
 * @LastEditTime: 2025-04-21 13:48:29
 * @LastEditors: WangZhiYu <w19165802736@163.com>
 * @Descripttion:
-->
<template>
  <div id="app">
    <div class="lang-switch">
      <el-dropdown @command="handleLangChange">
        <span class="el-dropdown-link">
          {{ $t('message.language') }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="en" v-if="$i18n.locale !== 'en'">English</el-dropdown-item>
          <el-dropdown-item command="zh" v-if="$i18n.locale !== 'zh'">中文</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleLangChange(lang) {
      this.$i18n.locale = lang;
      localStorage.setItem('lang', lang);
      if (this.$route.path.includes('share') || this.$route.path.includes('Share')) return;
      // 刷新页面
      location.reload();
    },
  },
};
</script>

<style>
@import url('./assets/css/public.css');

body,
html {
  background-color: rgba(10, 11, 13, 1);
}

.lang-switch {
  position: fixed;
  z-index: 1000;
  right: 10%;
  top: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dropdown-link {
  color: #fff;
  font-size: 20px;
}

/* 定义滚动条整体样式 */
::-webkit-scrollbar {
  width: 0px; /* 滚动条宽度 */
  height: 0px; /* 滚动条高度 */
}

/* 定义滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #1c1d24; /* 轨道背景色 */
  border-radius: 4px; /* 轨道圆角 */
}

/* 定义滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #1c1d24; /* 滑块颜色 */
  border-radius: 4px; /* 滑块圆角 */
}

/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #1c1d24; /* 悬停时滑块颜色 */
}
</style>
